
import { Component } from 'react';
import styles from './channel.less'
import { Carousel } from 'antd';

class ChannelBig extends Component {
  constructor(props) {
    super(props);
    this.state = {}
  }

  bannerChage = (val) => {
    console.log(val)
  }

  handlePrev = (val) => {
    this.refs.carousel.prev()
  }
  handleNext = (val) => {
    this.refs.carousel.next()
  }

  render () {
    return (
      <div className={styles.channel_big}>
        <Carousel afterChange={this.bannerChage} ref="carousel">
          <div className={styles.carousel_item}>
            <img src="/image/banner/1.jpg" />
          </div>
          <div className={styles.carousel_item}>
            <img src="/image/banner/2.jpg" />
          </div>
          <div className={styles.carousel_item}>
            <img src="/image/banner/3.jpg" />
          </div>
          <div className={styles.carousel_item}>
            <img src="/image/banner/4.jpg" />
          </div>
        </Carousel>
        <div className={styles.lt_arrow} onClick={this.handlePrev}>
          <i className="iconfont icon-left"></i>
        </div>
        <div className={styles.rt_arrow} onClick={this.handleNext}>
          <i className="iconfont icon-right"></i>
        </div>
      </div>
    )
  }
}
export default ChannelBig